<template>
  <div v-if="data.length" :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart
      :forceFit="true"
      height="400"
      :data="dataSource"
      padding="auto"
    >
      <v-tooltip></v-tooltip>
      <v-legend position='right-center' :offsetX="-100"/>
      <v-coord type='theta' :radius="0.75"/>
      <v-stack-bar position='count' :color="color" :style="style" :label="label"/>
    </v-chart>
  </div>
</template>

<script>

    const data = [
        { "name": "张三", "count": 3, "time": null },
        { "name": "李四", "count": 1, "time": null },
        { "name": "王五", "count": 2, "time": null }
        ]

    const color = ['name', ['#1890ff', '#37c661', '#fbce1e', '#2b3b79', '#8a4be2', '#1dc5c5']];

    const label = ['count', function(val) {
        return {
            offset: -30,
            textStyle: {
                fill: 'white',
                fontSize: 14,
                shadowBlur: 2,
                shadowColor: 'rgba(0, 0, 0, .45)'
            },
            formatter: function formatter(text) {
                return text+'次';
            }
        };
    }];

    const style = {
        stroke: 'white',
        lineWidth: 1
    }

    export default {
        name:'Piechart',
        data() {
            return {
                data,
                color,
                label,
                style,
            }
        },
        props:{
            dataSource:Array,
            title:String
        },
    };
</script>

